<template>
  <q-page class="q-pa-md">
    <titleList :titleListData="['新增模型版本','模型详情']">
      <div class="dataBox">
        <div class="row">
          <div class="col">模型名称：<i>{{ ModelDetailInfo.title }}</i></div>
          <div class="col">模型ID：<i>{{ ModelDetailInfo.id }}</i></div>
          <div class="col">创建人：<i>{{ ModelDetailInfo.creator_username }}</i></div>
          <div class="col">创建时间：<i>{{ ModelDetailInfo.create_at }}</i></div>
        </div>
        <div class="row">
          <div class="col">模型说明：<i>{{ ModelDetailInfo.description }}</i></div>
        </div>
      </div>
    </titleList>

    <titleList :titleListData="['发布模型','版本信息']">
      <el-form
        :model="setDataForm"
        :size="'small'"
        label-position="right"
        label-width="100px"
        style="max-width: 460px">
        <el-form-item label="之前版本：" prop="beforeVersion">
          <span>{{ ModelDetailInfo.latest_version_number }}</span>
        </el-form-item>
        <el-form-item label="模型版本：">
          <span>{{ ModelDetailInfo.next_version_number }}</span>
        </el-form-item>
        <el-form-item label="版本描述：">
          <el-input
            v-model.trim="setDataForm.description"
            type="textarea"
            placeholder="请输入"
            :rows="4"
            show-word-limit
            maxlength="100"
          />
        </el-form-item>
      </el-form>
    </titleList>
    <titleList :titleListData="['发布模型','模型来源']">
      <el-form
        ref="ruleFormRef"
        :model="modelData"
        :rules="rules"
        :size="'small'"
        label-position="right"
        label-width="100px"
        style="max-width: 560px">
        <el-form-item label="模型来源：" prop="source">
          <el-select v-model="modelData.source" placeholder="请选择训练任务">
            <el-option v-for="item in ModelSource" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
          <span class="text">导入训练作业中训练完成的模型。请在下方选择需要导入的训练作业</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :size="'small'" plain @click="Cancel">{{ $t('cancle') }}</el-button>
          <el-button type="primary" :size="'small'" @click="addModel(ruleFormRef)">{{ $t('newBuilt') }}</el-button>
        </el-form-item>
      </el-form>
    </titleList>
  </q-page>
</template>

<script setup lang="ts">
import titleList from 'components/subTitleList.vue';
import { provide, ref, reactive } from "vue"
import { modelStore } from 'src/stores/model';
import {getCreateModelDetail, getModelSource, addModelVersion} from "src/api/model";
const showModelStore = modelStore()
import {useRouter} from "vue-router";
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const repository_model_id = showModelStore.repository_model_id
import type { FormInstance } from 'element-plus'
import {FormRules} from "element-plus";
import { ElMessage } from 'element-plus';
const ruleFormRef = ref<FormInstance>()
const setDataForm = reactive({
  beforeVersion: 1,
  modelVersion: 2,
  description: ''
})

const setDataRef = ref<FormInstance>()
const modelData = reactive({
  source: '',
})
const rules = reactive<FormRules>({
  source: [
    { required: true, message: '模型来源不能为空', trigger: 'blur' }
  ],
})

getModelDetail();
let ModelDetailInfo = ref({})
let ModelSource = ref({})
function getModelDetail () {
  getCreateModelDetail(projectId,repository_model_id).then( (res:any) => {
    ModelDetailInfo.value = res.data;
    const model_id = res.data.model_id
    getModelSource(projectId,model_id).then( (res:any) => {
      ModelSource.value = res.data;
    })
  })
}


//取消
const Cancel = () => {
  router.push({ name: 'model-app' })
}
//点击创建模型
const addModel = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const model_idData = ModelDetailInfo.value.id;
      let params = ref({
        description: setDataForm.description,
        model_run_id: modelData.source
      })
      addModelVersion(projectId,model_idData,params.value).then( (res:any) => {
        ElMessage.success("版本创建成功！！！")
        router.push({ name: 'model-app-detail' })
      })
    } else {
      ElMessage.error("校验不通过,模型来源不能为空!!!")
    }
  })
}
</script>

<style scoped lang="scss">
.el-form-item__label {
  color: #1D1D1D;
  font-weight: bold;
}
.dataBox {
  padding-left: 20px;
  font-size: 12px;
  .row {
    margin-bottom: 20px;
    i {
      font-style: initial;
      color: #333333;
    }
  }
  .flexBox {
    display: flex;
  }
}
.buttons {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}
.text {
  margin-top: 10px;
}

::v-deep .el-form-item__label {
  color: #1D1D1D!important;
  font-weight: bold;
  font-size: 13px;
}
</style>
